<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<title>JS/jQuery图片查看器viewer.js演示-默认效果_dowebok</title>
<link rel="stylesheet" href="css/viewer.css">
<style>
* { margin: 0; padding: 0;}
#dowebok { display: none;}
#dowebok li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
#dowebok li img { width: 100%;}
</style>
</head>

<body>
<h1>默认效果</h1>

<ul id="dowebok">
	<li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li>
	<li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="图片2"></li>
	<li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="图片3"></li>
	<li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="图片4"></li>
	<li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="图片5"></li>
	<li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="图片6"></li>
</ul>

<script src="js/viewer.js"></script>
<script>
var viewer = new Viewer(document.getElementById('dowebok'), {
	// url: 'data-original',
	url: 'img/tibet-6.jpg',
	inline: false,
	backdrop: 'static',
	toolbar: {
		zoomIn: 4,
		zoomOut: 4,
		oneToOne: 4,
		reset: 4,
		prev: 4,
		next: 4,
		rotateLeft: 4,
		rotateRight: 4,
		flipHorizontal: 4,
		flipVertical: 4,
	}, 
	shown() {
		viewer.full()
	  },
	hide() {
		console.log('---hide---')
	}
});
viewer.show()
</script>
</body>
</html>